/* 宽度 */
$w:0;
@while $w <= 1200 {
	.w#{$w}{
		width: #{$w}px;
	}
	.h#{$w}{
		height: #{$w}px;
	}
	@if $w < 10 {
		$w : $w + 1 ;
	} @else if $w < 200{
		$w : $w + 5 ;
	} @else {
		$w : $w + 10 ;
	}
}

/* 字号 */
@for $fz from 12 through 100 {
	.fz#{$fz}{
		font-size: #{$fz}px !important;
	}
}

/* 边距 - 覆盖顺序是小的尺寸覆盖大的尺寸 少的方向覆盖多的方向 */
$s : 0 ;
@while $s <= 500 {
	.pd#{$s}{
		padding: #{$s}px!important;
	}
	.m#{$s}{
		margin: #{$s}px!important;
	}
	@if $s == 15 {
		.pd{
			padding: 15px!important;
		}
		.m{
			margin: 15px!important;
		}
	}
	@if $s < 10 {
		$s : $s + 1 ;
	} @else if($s < 100){
		$s : $s + 5 ;
	}  @else if($s < 300){
		$s : $s + 10 ;
	} @else{
		$s : $s + 50 ;
	}
}

$s : 0 ;
@while $s <= 500 {
	.ptb#{$s}{
		padding-top: #{$s}px!important;
		padding-bottom: #{$s}px!important;
	}
	.plr#{$s}{
		padding-left: #{$s}px!important;
		padding-right: #{$s}px!important;
	}
	.mtb#{$s}{
		margin-top: #{$s}px!important;
		margin-bottom: #{$s}px!important;
	}
	.mlr#{$s}{
		margin-left: #{$s}px!important;
		margin-right: #{$s}px!important;
	}
	@if $s == 15 {
		.ptb{
			padding-top: 15px!important;
			padding-bottom: 15px!important;
		}
		.plr{
			padding-left: 15px!important;
			padding-right: 15px!important;
		}
		
		.mlr{
			margin-left: 15px!important;
			margin-right: 15px!important;
		}
		.mtb{
			margin-top: 15px!important;
			margin-bottom: 15px!important;
		}
	}
	@if $s < 10 {
		$s : $s + 1 ;
	} @else if($s < 100){
		$s : $s + 5 ;
	}  @else if($s < 300){
		$s : $s + 10 ;
	} @else{
		$s : $s + 50 ;
	}
}

$s : 0 ;
@while $s <= 500 {
	.pl#{$s}{
		padding-left:  #{$s}px!important;
	}
	.pr#{$s}{
		padding-right:  #{$s}px!important;
	}
	.pt#{$s}{
		padding-top:  #{$s}px!important;
	}
	.pb#{$s}{
		padding-bottom:  #{$s}px!important;
	}
	.ml#{$s}{
		margin-left:  #{$s}px!important;
	}
	.mr#{$s}{
		margin-right:  #{$s}px!important;
	}
	.mt#{$s}{
		margin-top:  #{$s}px!important;
	}
	.mb#{$s}{
		margin-bottom:  #{$s}px!important;
	}
	@if $s == 15 {
		.pt{
			padding-top: 15px!important;
		}
		.pb{
			padding-bottom: 15px!important;
		}
		.pl{
			padding-left: 15px!important;
		}
		.pr{
			padding-right: 15px!important;
		}
		.mt{
			margin-top: 15px!important;
		}
		.mr{
			margin-right: 15px!important;
		}
		.ml{
			margin-left: 15px!important;
		}
		.mb{
			margin-bottom: 15px!important;
		}
	}
	@if $s < 10 {
		$s : $s + 1 ;
	} @else if($s < 100){
		$s : $s + 5 ;
	}   @else if($s < 300){
		$s : $s + 10 ;
	} @else{
		$s : $s + 50 ;
	}
}

/* 布局 */
.grid,.gridNoPd,.gridSmPd,.gridNoMb{
	padding: 10px 10px 0 10px;
	>.item,>image,>view,>navigator,>text,>button{
		padding: 0 5px;
		margin-bottom: 10px;
	}
}

.gridNoMb{
	>.item,>image,>view,>navigator,>text,>button{
		margin-bottom: 0;
	}
}
.gridNoPd{
	padding: 0;
	>.item,>image,>view,>navigator,>text,>button{
		padding: 0;
		margin-bottom: 0;
	}
}
.gridSmPd{
	padding: 0;
	>.item,>image,>view,>navigator,>text,>button{
		padding-right: 0;
		&:first-child{
			padding-left: 0;
			padding-right: 5px;
		}
	}
}

/* fix-auto布局 */
.fixAuto,.fixAutoNoPd,.fixAutoSmPd{
	padding: 10px 5px;
	>.item,>view,>image,>navigator,>text,>button{
		padding: 0 5px;
	}
}

.fixAutoSmPd{
	padding: 0;
	>.item,>view,>image,>navigator,>text{
		padding-right: 0;
		&:first-child{
			padding-left: 0;
			padding-right: 5px;
		}
	}
}
.fixAutoNoPd{
	padding: 0;
	>.item,>view,>image,>navigator,>text{
		padding: 0;
	}
}


/* 圆角 */
$r:0;
@while $r <= 50{
	.rds#{$r},&.radius#{$r}{
		-webkit-border-radius:#{$r}px!important;
		-moz-border-radius:#{$r}px!important;
		border-radius:#{$r}px!important;
	}
	$r : $r + 1;
}

$r:0;
@while $r <= 50{
	.rdsTl#{$r},.radiusTopLeft#{$r}{
		border-top-left-radius: #{$r}px!important;
	}
	.rdsTr#{$r},.radiusTopRight#{$r}{
		border-top-right-radius: #{$r}px!important;
	}
	.rdsBl#{$r},.radiusBottomLeft#{$r}{
		border-bottom-left-radius: #{$r}px!important;
	}
	.rdsBr#{$r},.radiusBottomRight#{$r}{
		border-bottom-right-radius: #{$r}px!important;
	}
	$r : $r + 1;
}

/* 分割线 */
$s:10;
@while $s <= 100 {
	.split#{$s}{
		&:before{
			height: #{$s}px;
			margin-top: -#{$s/2}px;
		}
	}
	@if $s == 10 {
		.split{
			&:before{
				height: 10px;
				margin-top: -5px;
			}
		}
	}
	$s:$s+2;
}


/* 按钮样式类 */
.btn,.roundBtn{
	padding: 6px 12px;
	font-size: 14px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	user-select: none;
	&+.btn,&+.roundBtn{
		margin-left: 10px;
	}
	&.block{
	   padding: 10px 12px;
	}
}

.roundBtn{
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

@for $i from 1 through 200 {
	.top#{$i}{
		top: $i * 1px;
	}
	.left#{$i}{
		left: $i *  1px;
	}
	.bottom#{$i}{
		bottom: $i *  1px;
	}
	.right#{$i}{
		right: $i *  1px;
	}
}


uni-checkbox:not([disabled]) .uni-checkbox-input:hover,uni-radio:not([disabled]) .uni-radio-input:hover{
	border-color: #555;
}
uni-checkbox .uni-checkbox-input{
	width: 20px;
	height: 20px;
	margin-left: 2px;
}
uni-toast{
	display: flex;
	align-items: center;
	justify-content: center;
}
uni-toast .uni-toast{
	width: auto;
	padding: 20px 50px;
	transform: scale(0.8);
	position: static;
}
uni-toast .uni-icon_toast{
	margin: 0 auto 20px;
	display: block;
	vertical-align: top;
}
uni-toast .uni-icon_toast.uni-icon-success-no-circle{
	width: 55px;
	height: 55px;
	line-height: 55px;
	&:before{
		position: relative;
		top: -10px;
		width: 55px;
		height: 55px;
		line-height: 55px;
	}
}

uni-toast .uni-icon_toast.uni-loading{
	margin: 20px auto;
	display: block;
	vertical-align: top;
}
uni-toast .uni-toast__content{
	font-size: 18px;
	margin: 0;
	display: block;
	text-align: center;
}

uni-toast[position="bottom"]{
	.uni-sample-toast{
		top: auto;
		bottom: 100px;
	}
}

uni-toast[position="top"]{
	.uni-sample-toast{
		top: 100px;
	}
}

uni-modal .uni-modal__hd{
	padding: 20px 10px;
}
uni-modal .uni-modal__bd{
	padding: 10px 10px 30px;
}
uni-modal .uni-modal{
	transform: translate(-50% , -90%);
}
uni-modal .uni-modal__btn{
	cursor: pointer;
	&:hover{
		opacity: .8;
	}
}
body, html{
	user-select:auto!important;
}
table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #e6e6e6;
	thead{
		tr{
			background-color: #f2f2f2;
			th{
				color: #8799a3;
				width: 1%;
			}
		}
	}
	tr{
		background-color: #fff;
		transition: all 0.4s;
		td,th{
			border: 1px solid #e6e6e6;
			overflow: hidden;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: break-word;
			padding: 5px 10px;
			height: 28px;
			line-height: 28px;
			&.autoWidth{
				width: auto;
			}
		}
		&:hover{
			background-color: #f2f2f2;
		}
	}
}